<template>
  <div @dragstart="dragStart">
    <div class="card">
      <h4>基础用法</h4>
      <div class="content">
        <Icon type="md-heart" :size="14" color='red' />
        <Icon type="md-heart" :size="28" color='blue' />
        <Icon type="md-heart" :size="40" color='green'/>
        <Icon type="md-heart" :size="50"  color='pink'/>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon } from '@/components/data'
export default {
  data() {
    return {
      attributes: Icon,
    }
  },

  mounted() {
    // 添加拖拽属性
    let nodeArr = document.getElementsByClassName('ivu-icon')
    for (var i = 0; i < nodeArr.length; i++) {
      nodeArr[i].draggable = true
    }
  },
  methods: {
    // 模拟拖拽组件
    dragStart(e) {

      // 通过attributes上的key去匹配节点上的key
      
      Object.keys(this.attributes).forEach((item) => {
        switch (item) {
          // case 'label':
          //   // 文字需要重置属性key
          //   this.attributes.label.value = e.target.innerText
          //   break
          default:
            this.attributes[item].value = e.target.__vue__[item]
            break
        }
      })
      let componentName = 'Icon' // 匹配的是dataName，即iview的组件标签
      let info = {
        name: componentName,
        ui: 'iview-UI',
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
      
      this.updateAttribute(this.attributes)
    },

    // 延迟更新组件，当组件渲染完成后，我们需要手动给它加上设置的样式
    updateAttribute(attr) {
      setTimeout(() => {
        
        this.$EventBus.$emit('getAttr', attr)
        
      }, 1000)
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  margin: 15px;
  i {
    margin-left: 10px;
  }
  .content {
    padding: 10px;
    margin-left: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 10px 0 #ddd;
  }
  button {
    margin: 5px;
  }
  /deep/.ivu-btn-loading,
  /deep/.ivu-btn.disabled > *,
  /deep/.ivu-btn[disabled] > * {
    // 值为none表示：元素不对指针事件做出反应。
    pointer-events: initial;
  }
  /deep/.ivu-row {
    background: rgba(0, 153, 229, 0.7);
  }
}
</style>
